<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./vue.global.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="root">
    <my-title></my-title>
    {{title}} {{num}}
    <my-footer></my-footer>
  </div>
  <script>
    const { createApp, computed } = window.Vue
    
    const app = createApp({
      components: {
        // MyTitle,
        // MyFooter
      },

      // provide: {
      //   num: 100,
      //   setNum() {
      //     this.num = 200
      //   }
      // },
      provide() {
        return {
          num: 1000,
          setNum() {
          },
          reactiveNum: computed(() => {
            return this.num + 10
          })
        }
      },

      data() {
        return {
          title: 'hello',
          num: 90
        }
      },

      mounted() {
        setTimeout(() => {
          this.num = 500
        }, 3000)
      },
    })
    
    app.component('my-title', {
      inject: ['num', 'reactiveNum'],
      template: `
        <h1>
          hello {{this.num}} {{reactiveNum}}
        </h1>
      `
    })

    app.component('my-footer', {
      inject: ['num', 'setNum', 'reactiveNum'],
      template: `
        <h3>
          world {{this.num}} {{reactiveNum}}
        </h3>
      `,
      mounted() {
        this.setNum()
      },
    })

    let vm = app.mount('#root')
  </script>
</body>
</html>